import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as Tabs from './Tabs.stories';

<Meta of={Tabs} />

# Tabs

A tab component organizes content into multiple sections, enabling users to seamlessly switch between views without page reloads, enhancing navigation and user experience.

## Usage

<Canvas of={Tabs.Documentation} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const TabsExample = () => {
    return (
        <Tabs
            size="md"
            spacing="lg"
            separator={true}
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account settings and personal information"
                />,
                <Tabs.Tab
                    key="security"
                    value="security"
                    trigger="Security"
                    content="Security settings and password management"
                />,
                <Tabs.Tab
                    key="preferences"
                    value="preferences"
                    trigger="Preferences"
                    content="User interface preferences and customization"
                />
            ]}
        />
    );
};

export default TabsExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tabs/Tabs.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={Tabs.Documentation} />

```tsx
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const TabsExample = () => {
    return (
        <Tabs
            size="md"
            spacing="lg"
            separator={true}
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account settings and personal information"
                />,
                <Tabs.Tab
                    key="security"
                    value="security"
                    trigger="Security"
                    content="Security settings and password management"
                />,
                <Tabs.Tab
                    key="preferences"
                    value="preferences"
                    trigger="Preferences"
                    content="User interface preferences and customization"
                />
            ]}
        />
    );
};

export default TabsExample;
```

## Examples

### Default

<Canvas of={Tabs.Default} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const DefaultTabsExample = () => {
    return (
        <Tabs
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default DefaultTabsExample;
` } } />

### Size Variants

#### Small (SM)

<Canvas of={Tabs.SizeSmall} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const SmallTabsExample = () => {
    return (
        <Tabs
            size="sm"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default SmallTabsExample;
` } } />

#### Medium (MD)

<Canvas of={Tabs.SizeMedium} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const MediumTabsExample = () => {
    return (
        <Tabs
            size="md"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default MediumTabsExample;
` } } />

#### Large (LG)

<Canvas of={Tabs.SizeLarge} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const LargeTabsExample = () => {
    return (
        <Tabs
            size="lg"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default LargeTabsExample;
` } } />

#### Extra Large (XL)

<Canvas of={Tabs.SizeExtraLarge} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const ExtraLargeTabsExample = () => {
    return (
        <Tabs
            size="xl"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default ExtraLargeTabsExample;
` } } />

### Spacing Variants

<Canvas of={Tabs.SpacingMedium} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const SpacingMediumExample = () => {
    return (
        <Tabs
            spacing="md"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default SpacingMediumExample;
` } } />

### With Separator

<Canvas of={Tabs.WithSeparator} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithSeparatorExample = () => {
    return (
        <Tabs
            separator={true}
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithSeparatorExample;
` } } />

### With Default Value

<Canvas of={Tabs.WithDefaultValue} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithDefaultValueExample = () => {
    return (
        <Tabs
            defaultValue="password"
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithDefaultValueExample;
` } } />

### With Controlled Value

<Canvas of={Tabs.WithControlledValue} source={ { code: `
import React, { useState } from "react";
import { Tabs } from "@webiny/admin-ui";

const WithControlledValueExample = () => {
    const [value, setValue] = useState("password");

    return (
        <Tabs
            value={value}
            onValueChange={setValue}
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithControlledValueExample;
` } } />

### With Icons

<Canvas of={Tabs.WithIcons} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";
import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";

const WithIconsExample = () => {
    return (
        <Tabs
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    icon={<PersonIcon />}
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    icon={<LockIcon />}
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithIconsExample;
` } } />

### With Disabled Tab

<Canvas of={Tabs.WithDisabledTab} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithDisabledTabExample = () => {
    return (
        <Tabs
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                    disabled={true}
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithDisabledTabExample;
` } } />

### With Hidden Tab

<Canvas of={Tabs.WithHiddenTab} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithHiddenTabExample = () => {
    return (
        <Tabs
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                    visible={false}
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );
};

export default WithHiddenTabExample;
` } } />

## Anatomy

### Construction
<img src="/images/storybook/tabs/construction.png" alt="Construction"/>

### Size & States
<img src="/images/storybook/tabs/size-and-states.png" alt="Size & States"/>

### Tab Group
<img src="/images/storybook/tabs/tab-group.png" alt="Tab Group"/>

## Usage
<img src="/images/storybook/tabs/usage.png" alt="Usage"/>
